<template>
  <div class="body">
    <!--<img src="img/tubiao-09.png" class="logo" />-->
    <p class="logo">
      <q-avatar> <img src="@/assets/svg/rosefinch.svg" /> </q-avatar>
      红雀云●智慧写作
    </p>
    <div class="body_count">
      <div class="login_count">
        <div class="login_count_a">
          <!-- <div class="login_count_a_l">
            <div class="login_a_l_t">扫码登录点这里</div>
            <div class="triangle"></div>
            <img src="@/assets/login/tubiao-02.png" class="icon_e" />
          </div> -->
          <div class="all" v-if="show != 'forget'">
            <ul id="option">
              <li
                :class="[
                  'login_left',
                  'login_btn',
                  show == 'login' ? 'active' : '',
                ]"
                active
                @click="show = 'login'"
              >
                登录
              </li>
              <li
                :class="[
                  'login_left',
                  'login_btn',
                  show == 'reg' ? 'active' : '',
                ]"
                @click="show = 'reg'"
              >
                注册
              </li>
              <!-- <li class="login_right login_btn active">忘记密码</li> -->
            </ul>
            <ul id="card">
              <li v-if="show == 'login'" class="login_account active">
                <!--输入框-->
                <div class="login_bot_count">
                  <img src="@/assets/login/tubiao-07.png" alt="" />
                  <input
                    type="text"
                    placeholder="请输入手机号"
                    v-model="loginModel.phone"
                    @input="onChange(1)"
                  />
                  <span :class="[{ hide: loginError.user }, 'tel-warn']">
                    <q-icon name="error" />
                  </span>
                </div>
                <div class="login_bot_count">
                  <img src="@/assets/login/tubiao-06.png" alt="" />
                  <input
                    v-model="loginModel.password"
                    placeholder="输入密码"
                    type="password"
                    id="passport"
                    @input="onChange(2)"
                    @keyup.enter="login"
                  />
                  <span :class="[{ hide: loginError.password }, 'tel-warn']">
                    <q-icon name="error" />
                  </span>
                </div>
                <div class="login_bot">
                  <a href="#" @click.prevent="show = 'forget'">忘记密码?</a>
                  <p>
                    <input
                      type="checkbox"
                      name="vehicle"
                      v-model="remember"
                      @input="input"
                    />记住密码
                  </p>
                </div>
                <div
                  :class="[{ hide: loginError.message == '' }, 'bottom-info']"
                >
                  {{ loginError.message }}
                </div>
                <button class="login_button" @click="login">登录</button>
              </li>
              <li v-if="show == 'reg'" class="active">
                <!--输入框-->
                <div class="login_account_count">
                  <img src="@/assets/login/tubiao-05.png" alt="" />
                  <select class="account_select">
                    <option value="+86">+86</option>
                  </select>
                  <img
                    src="@/assets/login/line-down.png"
                    alt=""
                    class="account_select_icon"
                  />
                  <input
                    type=""
                    name=""
                    class="mobile_input"
                    placeholder="请输入手机号码"
                    v-model="regModel.phone"
                    @input="onChange(3)"
                  />
                  <span :class="[{ hide: regError.user }, 'tel-warn']">
                    <q-icon name="error" />
                  </span>
                </div>
                <div class="login_account_counts">
                  <img src="@/assets/login/tubiao-06.png" alt="" />
                  <input
                    type=""
                    name=""
                    id=""
                    placeholder="请输入验证码"
                    v-model="regModel.code"
                    @input="onChange(4)"
                  />
                  <span :class="[{ hide: regError.code }, 'tel-warn']">
                    <q-icon name="error" />
                  </span>
                  <input
                    class="account_code"
                    type="button"
                    id="btn"
                    :disabled="regError.disabled"
                    :value="'获取验证码(' + regError.count + ')'"
                    @click="getCode(1)"
                  />
                </div>
                <div class="login_bot_count">
                  <img src="@/assets/login/tubiao-06.png" alt="" />
                  <input
                    v-model="regModel.password"
                    placeholder="输入密码"
                    type="password"
                    id="passport"
                    @input="onChange(5)"
                  />
                  <span :class="[{ hide: regError.password }, 'tel-warn']">
                    <q-icon name="error" />
                  </span>
                </div>
                <div class="login_bot_count">
                  <img src="@/assets/login/tubiao-06.png" alt="" />
                  <input
                    v-model="regModel.confirmPassword"
                    placeholder="确认密码"
                    type="password"
                    id="passport"
                    @input="onChange(6)"
                  />
                  <span
                    :class="[{ hide: regError.confirmPassword }, 'tel-warn']"
                  >
                    <q-icon name="error" />
                  </span>
                </div>
                <div :class="[{ hide: regError.message == '' }, 'bottom-info']">
                  {{ regError.message }}
                </div>
                <button class="login_button" @click="reg">注册</button>
              </li>
            </ul>
          </div>
          <div class="all" v-if="show == 'forget'">
            <div class="login_bot">
              <a href="#" class="login_bot" @click.prevent="show = 'login'"
                >返回登录</a
              >
            </div>

            <ul id="card">
              <li v-if="show == 'forget'" class="login_account active">
                <div class="login_bot_count">
                  <img src="@/assets/login/tubiao-07.png" alt="" />
                  <input
                    type="text"
                    placeholder="请输入手机号"
                    v-model="forgetModel.phone"
                    @input="onChange(7)"
                  />
                  <span :class="[{ hide: forgetError.user }, 'tel-warn']">
                    <q-icon name="error" />
                  </span>
                </div>
                <div class="login_account_counts">
                  <img src="@/assets/login/tubiao-06.png" alt="" />
                  <input
                    type=""
                    name=""
                    id=""
                    v-model="forgetModel.code"
                    placeholder="请输入验证码"
                    @input="onChange(8)"
                  />
                  <span :class="[{ hide: forgetError.code }, 'tel-warn']">
                    <q-icon name="error" />
                  </span>
                  <input
                    class="account_code"
                    type="button"
                    id="btn"
                    :disabled="forgetError.disabled"
                    :value="'获取验证码(' + forgetError.count + ')'"
                    @click="getCode(2)"
                  />
                </div>
                <div class="login_bot_count">
                  <img src="@/assets/login/tubiao-06.png" alt="" />
                  <input
                    type="password"
                    name=""
                    id=""
                    v-model="forgetModel.password"
                    placeholder="请输入密码"
                    @input="onChange(9)"
                  />
                  <span :class="[{ hide: forgetError.password }, 'tel-warn']">
                    <q-icon name="error" />
                  </span>
                </div>
                <div class="login_bot_count">
                  <img src="@/assets/login/tubiao-06.png" alt="" />
                  <input
                    type="password"
                    name=""
                    id=""
                    v-model="forgetModel.confirmPassword"
                    placeholder="确认密码"
                    @input="onChange(10)"
                  />
                  <span
                    :class="[{ hide: forgetError.confirmPassword }, 'tel-warn']"
                  >
                    <q-icon name="error" />
                  </span>
                </div>
                <div
                  :class="[{ hide: forgetError.message == '' }, 'bottom-info']"
                >
                  {{ forgetError.message }}
                </div>
                <button class="login_button" @click="forget">修改密码</button>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: "",
      password: "",
      loginError: {
        user: true,
        password: true,
        message: "",
      },
      loginModel: {
        phone: "",
        password: "",
      },
      regError: {
        user: true,
        password: true,
        confirmPassword: true,
        code: true,
        message: "",
        count: 120,
        disabled: false,
      },
      regModel: {
        phone: "",
        code: "",
        password: "",
        confirmPassword: "",
      },
      forgetError: {
        user: true,
        password: true,
        confirmPassword: true,
        code: true,
        message: "",
        count: 120,
        disabled: false,
      },
      forgetModel: {
        phone: "",
        code: "",
        password: "",
        confirmPassword: "",
      },
      loginNoError: true,
      errMessage: "用户名或密码错误.",
      show: "login", //'reg','forget'
      remember: true,
    };
  },
  methods: {
    async login() {
      this.loginError.message = "";
      if (!/^1[3456789]\d{9}$/.test(this.loginModel.phone)) {
        return;
      }
      if (!/^.{6,40}$/.test(this.loginModel.password)) {
        return;
      }

      try {
        // 登录api服务端
        let data = await this.$business.login(
          this.loginModel.phone,
          this.loginModel.password,
          this.remember
        );
        console.log(data);
        // 如果登录出错
        if (data.state < 0) {
          // this.loginError.message = "用户名或密码错误";
          this.$toast("用户名或密码错误");
          return;
        }

        this.$utils.setValue("remember", this.remember);
        this.$store.commit("updateAccount", data.user);
        this.$router.push({ path: "/", params: {} });
      } catch (err) {
        this.$toast(err.message);
      }
    },
    async reg() {
      if (!/^1[345678]\d{9}$/.test(this.regModel.phone)) {
        this.$toast("手机号错误!");
        return;
      }
      if (!/^\d{6}$/.test(this.regModel.code)) {
        this.$toast("验证码错误");
        return;
      }
      if (
        !/^.{6,40}$/.test(this.regModel.password) ||
        this.regModel.confirmPassword !== this.regModel.password
      ) {
        this.$toast("密码长度错误,或者两次密码输入不一致.");
        return;
      }
      try {
        // let pwd = this.$utils.encryption(this.password);
        let pwd = this.regModel.password;
        let res = await this.$business.registry(
          this.regModel.phone,
          pwd,
          this.regModel.code
        );
        console.log(res.data);
        if (res.data.state === 1) {
          this.$toast("注册成功，请登录", {
            timeout: 2000,
          });
          this.show = "login";
        }

        if (res.data.state < 0) {
          this.$toast(res.data.message);
        }
      } catch (err) {
        this.$toast(err.message);
      }
    },
    async forget() {
      if (!/^1[345678]\d{9}$/.test(this.forgetModel.phone)) {
        this.$toast("手机号错误!");
        return;
      }
      if (!/^\d{6}$/.test(this.forgetModel.code)) {
        this.$toast("验证码错误");
        return;
      }
      if (
        !/^.{6,40}$/.test(this.forgetModel.password) ||
        this.forgetModel.confirmPassword !== this.forgetModel.password
      ) {
        this.$toast("密码长度错误,或者两次密码输入不一致.");
        return;
      }
      try {
        // let pwd = this.$utils.encryption(this.password);
        let pwd = this.forgetModel.password;
        let res = await this.$business.forgetPassword(
          this.forgetModel.phone,
          this.forgetModel.code,
          pwd
        );
        console.log(res.data);
        if (res.data.state === 1) {
          this.$toast("密码修改成功，请登录", {
            timeout: 2000,
          });
          this.show = "login";
        } else {
          this.errMsg = res.data.message;
        }
      } catch (err) {
        this.$toast(err.message);
      }
    },
    async getCode(flag) {
      try {
        if (flag == 1) {
          if (!/^1[345678]\d{9}$/.test(this.regModel.phone)) {
            this.$toast("手机号格式不正确");
            return;
          }
          this.regError.disabled = true;
          let k = setInterval(() => {
            this.regError.count--;
            if (this.regError.count <= 0) {
              this.regError.disabled = false;
              this.regError.count = 120;
              clearInterval(k);
            }
          }, 1000);

          let res = await this.$business.getValidateCode(this.regModel.phone);
          if (res.data === -11) {
            this.$toast("请不要重复发送请求.");
          }
        }
        if (flag == 2) {
          if (this.forgetModel.phone === "") {
            this.forgetError.message = "手机号为空";
            return;
          }
          this.forgetError.disabled = true;
          let k = setInterval(() => {
            this.forgetError.count--;
            if (this.forgetError.count <= 0) {
              this.forgetError.disabled = false;
              this.forgetError.count = 120;
              clearInterval(k);
            }
            clearInterval(k);
          }, 1000);
          let res = await this.$business.getValidateCode(
            this.forgetModel.phone
          );
          if (res.data === -11) {
            this.$toast("请不要重复发送请求.");
          }
        }
      } catch (err) {
        this.$toast(err.message);
      }
    },
    onChange(flag) {
      console.info(flag);
      // login
      if (flag == 1) {
        this.loginError.user = /^1[3456789]\d{9}$/.test(this.loginModel.phone);
      }
      if (flag == 2) {
        this.loginError.password = /^.{6,40}$/.test(this.loginModel.password);
      }
      // reg
      if (flag == 3) {
        this.regError.user = /^1[3456789]\d{9}$/.test(this.regModel.phone);
      }
      if (flag == 4) {
        this.regError.code = /^\d{6}$/.test(this.regModel.code);
      }
      if (flag == 5) {
        this.regError.password = /^.{6,40}$/.test(this.regModel.password);
      }
      if (flag == 6) {
        this.regError.confirmPassword =
          /^.{6,40}$/.test(this.regModel.confirmPassword) &&
          this.regModel.confirmPassword === this.regModel.password;
      }
      // forget
      if (flag == 7) {
        this.forgetError.user = /^1[3456789]\d{9}$/.test(
          this.forgetModel.phone
        );
      }
      if (flag == 8) {
        this.forgetError.code = /^\d{6}$/.test(this.forgetModel.code);
      }
      if (flag == 9) {
        this.forgetError.password = /^.{6,40}$/.test(this.forgetModel.password);
      }
      if (flag == 10) {
        this.forgetError.confirmPassword =
          /^.{6,40}$/.test(this.forgetModel.confirmPassword) &&
          this.forgetModel.confirmPassword === this.forgetModel.password;
      }
    },
    input() {
      this.remember = !this.remember;
      this.$utils.setValue("remember", this.remember);
    },
  },
  mounted() {
    try {
      // 退出登录后重新登录,自动填写
      let acc = this.$utils.getJsonObj("user");
      let pwd = this.$utils.getValue("password");
      let remember = this.$utils.getValue("remember");
      if (acc) {
        this.loginModel.phone = acc.phone;
      }
      if (pwd && remember) {
        this.loginModel.password = pwd;
      }
    } catch (err) {
      this.$toast(err.message);
    }
  },
};
</script>
<style scoped>
@import "~@/assets/css/login.css";
</style>